<template>
    <view class="content ">
       
        <view class="mt15 bgWhite mlr15 radius10 ">

            <view class="justify-between align-center mlr15 ptb10 borderBottom">
                <text class="label">头像</text>
                <view class="justify-end align-center">
                    <button open-type="chooseAvatar" @chooseavatar="chooseAvatar">
                        <image v-if="userInfo.avatar" :src="userInfo.avatar" mode=""></image>
                        <!-- <image v-else src="../../static/images/tx.png" mode=""></image> -->

                    </button>
                    <uv-icon color="#B2B2B2" name="arrow-right"></uv-icon>
                </view>
            </view>
            <view class="justify-between align-center mlr15 ptb15 borderBottom">
                <text class="label">昵称</text>
                <view class="justify-end align-center">
                    <uv-input type="nickname" inputAlign="right" v-model="userInfo.nickname" border="none"
                        id="nickName"></uv-input>
                    <uv-icon color="#B2B2B2" name="arrow-right"></uv-icon>
                </view>
            </view>
            <view class="justify-between align-center mlr15 ptb15 borderBottom">
                <text class="label">手机号</text>
                <view class="justify-end align-center">
                    <uv-input v-model="userInfo.mobile" inputAlign="right" border="none" type="number"></uv-input>
                    <uv-icon color="#B2B2B2" name="arrow-right"></uv-icon>
                </view>
            </view>
            <view class="justify-between align-center mlr15 ptb15 borderBottom">
                <text class="label">性别</text>
                <view class="justify-end align-center" @click="showGender">

                    {{genderType?genderType:'请选择'}}
                    <uv-icon color="#B2B2B2" name="arrow-right"></uv-icon>
                </view>
            </view>
            <view class=" mlr15 ptb15 ">
                <view class="align-center">
                    <view class="label">
                        照片
                    </view>
                    <text style="font-size: 23rpx;color: #999999;">添加您的照片，用于发布约球信息时显示</text>
                </view>
                <view class=" align-center justify-start mt5">
                    <uv-upload :fileList="fileList1" name="1" :maxCount="1" @afterRead="afterRead" @delete="deletePic">
                        <view class="uploadBtn align-center justify-center" >
                            <uv-icon color="#CDCDCD" name="plus"></uv-icon>
                        
                        </view>
                    </uv-upload>


                   
                </view>
            </view>
        </view>
        <view class="saveBox" @click="save">
            保存修改
        </view>
        <uv-picker ref="genderPicker" keyName="title" :columns="[genderList]" @confirm="genderConfirm"></uv-picker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                    name: '全部',
                }, {
                    name: '未读',
                }, {
                    name: '已读',
                }, ],
                chain: false,
                value: 0,
                indicatorDots: true,
                autoplay: true,
                interval: 3000,
                duration: 500,
                genderList: [

                    {
                        id: 1,
                        title: "女"
                    },
                    {
                        id: 2,
                        title: "男"
                    },

                ],
                list2: [],
                menuTop: uni.getStorageSync('menuInfo').menuTop,
                menuHeight: uni.getStorageSync('menuInfo').menuHeight,
                userInfo: {},
                categoryId: "",
                genderType: '性别',
                gender: '',
                fileList1: []

            }
        },

        onReady() {
            // 模拟接口请求数据


        },
        onLoad(opt) {


            this.getUser()

        },
        methods: {
            genderConfirm(e) {
                this.genderType = e.value[0].title
                this.gender = e.value[0].id
            },
            click(e) {
                console.log(e)
            },
            showGender() {
                this.$refs.genderPicker.open()
            },
            async getUser(index) {
                const data = await this.$api.userinfo()
                this.userInfo = data.data.user
              if(this.userInfo?.pic)   this.fileList1 = [{url:data.data.user.pic}]
                console.log(data)
            },
            async getList() {
                const {
                    data,
                    code
                } = await this.$api.activityList({
                    categoryId: this.categoryId
                })
                console.log(code, data)
                if (code == 200) {
                    this.list2 = data
                }
            },
            change(index) {
                this.value = index;
                this.categoryId = this.list[index].id
                this.getList()
            },
            toactMain(item) {
                uni.navigateTo({
                    url: '/pages/actMain/index?id=' + item.id
                })
            },
            chooseAvatar(e) {
                console.log(e)
                let vm = this
             

                vm.$api.uploadImg({ filePath: e.detail.avatarUrl}).then(res => {

                    vm.userInfo.avatar = res.fullurl
                })



            },
            deletePic(event) {
                this[`fileList${event.name}`].splice(event.index, 1)
            },
            // 新增图片
            async afterRead(event) {
                // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
                
                let lists = [].concat(event.file)
                let fileListLen = this[`fileList${event.name}`].length
                lists.map((item) => {
                    this[`fileList${event.name}`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    console.log(lists)
                    const result = await this.uploadFilePromise(lists[i].url)
                    let item = this[`fileList${event.name}`][fileListLen]
                    this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result
                    }))
                    fileListLen++
                }
            },
            uploadFilePromise(url) {
                let vm =this
                console.log(url)
                return new Promise((resolve, reject) => {
                    vm.$api.uploadImg({ filePath:url}).then(res => {
                        
                        resolve(res.data.fullurl)
                    }).catch(err=>{
                        reject(err)
                    })

                })
            },

            save() {
                let vm = this
                console.log(vm.fileList1)
                uni.createSelectorQuery().in(this) // 注意这里要加上 in(this)
                    .select("#nickName")
                    .fields({
                        properties: ["value"],
                    })
                    .exec((res) => {
                        const nickName = res?.[0]?.value
                        console.log(res, nickName)
                        vm.userInfo.nickname = nickName
                        vm.$api.userProfile({
                            nickname: vm.userInfo.nickname,
                            mobile:vm.userInfo.mobile,
                            gender:vm.gender,
                            avatar:vm.userInfo.avatar,
                            pic:vm.fileList1[0].url
                            
                        }).then(res => {
                            if (res.code == 1) {
                                uni.showToast({
                                    title: res.msg
                                })

                                setTimeout(() => {
                                    uni.navigateBack()
                                }, 800)
                            } else {
                                uni.showToast({
                                    title: res.msg,
                                    icon: 'none'
                                })
                            }
                        })
                    })
            }
        }
    }
</script>
<style scoped lang="scss">
    .content {
        background-color: #F3F5F7;
        min-height: 100vh;
    }

    button {
        width: 91rpx;
        height: 91rpx;
        border: none;
        overflow: auto;
    }

    image {
        width: 91rpx;
        height: 91rpx;
        border-radius: 50%;
    }

    .borderBottom {

        font-weight: 400;
        font-size: 29rpx;
        color: #333333;
        border-bottom: 1px solid #d4d4d4;
        opacity: .7;
    }

    .saveBox {
        position: fixed;
        left: 0;
        right: 0;
        margin: auto;
        bottom: 35rpx;
        width: 701rpx;
        height: 88rpx;
        background: #01C588;
        border-radius: 44rpx;
        font-weight: 400;
        font-size: 34rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 88rpx;
    }

    .label {
        font-size: 30rpx;
        color: #333333;
        font-weight: 600;

    }

    .uploadBtn {
        width: 139rpx;
        height: 139rpx;
        background: #F7F7F7;
        border-radius: 22rpx;
        margin-left: 20rpx;
    }
</style>
<style>


</style>